<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>求约发布</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <link rel="stylesheet" type="text/css" href="../css/dating.css" />
</head>

<body>
  <div id="app" v-cloak>
    <div class="wrap flex-wrap flex-vertical">
      <header id="header">
        <div class="header-wrap border-bottom">
          <div class="header-left" onclick="api.closeWin()">
            <i class="iconfont icon-pre"></i>
          </div>
          <div class="header-title">求约发布</div>
        </div>
      </header>
      <div class="flex-con">
        <div class="dating-list">
          <div class="dating-title">
            <div class="tabMenu-list">
              <span :class="['tabMenu', releseShow == 1 ? 'active' : '']" v-on:click="relese(1)">同城约</span>
              <span :class="['tabMenu', releseShow == 2 ? 'active' : '']" v-on:click="relese(2)">红包约</span>
            </div>
          </div>
          <div class="dating-form" v-show="releseShow==1">
            <div class="form-wrap">
              <div class="form-item">
                <div class="item-th">求约语音:</div>
                <div class="item-td">
                  <span v-if="!audioUrl" class="date-audio" @touchstart="voiceTouchstart" @touchend="voiceTouchend">请长按录制语音<i class="iconfont icon-yuyin"></i></span>
                  <div v-else @click="playVoice" class="voice-wrap">
                    <img :src="audioIcon" alt="">
                    <span>{{audioDuration}}"</span>
                    <i @click="deleteAudio" class="iconfont icon-close"></i>
                  </div>
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">约会类型:</div>
                <div class="item-td" @click="openActionSheet(typeList, 'type')">
                  <span class="date-type">{{form.type === '' ? '请选择约会类型' : typeList[form.type-1]}}</span>
                  <i class="iconfont icon-next"></i>
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">约会时间:</div>
                <div class="item-td">
                  <label for="time" class="placeholder">{{form.time === '' ? '请选择约会时间' : form.time}}</label>
                  <i class="iconfont icon-next"></i>
                  <input id="time" v-model="form.time" type="datetime-local">
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">约会地点:</div>
                <div class="item-td">
                  <input class="date-input" v-model="form.place" type="text" placeholder="请填写约会地点">
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">费用预算:</div>
                <div class="item-td">
                  <input class="date-input" v-model="form.fee" type="tel" placeholder="请填写费用预算">
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">费用支付:</div>
                <div class="item-td" @click="openActionSheet(payList, 'pay')">
                  <span class="date-pay">{{form.pay === '' ? '请选择费用支付方式' : payList[form.pay]}}</span>
                  <i class="iconfont icon-next"></i>
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">门槛设定:</div>
                <div class="item-td" @click="openActionSheet(requirementList, 'requirement')">
                  <span class="date-requirement">{{form.requirement === '' ? '请选择门槛' : requirementList[form.requirement-1]}}</span>
                  <i class="iconfont icon-next"></i>
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">求约描述:</div>
                <div class="item-td">
                  <textarea class="date-description" v-model="form.description" placeholder="说点什么……"></textarea>
                </div>
              </div>
              <div class="btn-wrap">
                <button class="date-btn" @click="submit">确认发布</button>
              </div>
            </div>
            <div class="rule-wrap">
              <div class="rule-title">求约规则：</div>
              <div class="rule-content">
                <p>1、请绿色约拍、约会、约游，严禁涉黄、涉暴力与政治。.</p>
                <p>2、达成求约后请及时私聊求约事宜，并商量确定收取或赠送赴约担保礼物金额,最后确定拍摄、约会或旅游行程安排。若为AA制，则赴约担保礼物退回。</p>
                <p>3、新版一对多交友约友众多，切勿相信任何私下转账要求,避免上当受骗，避免财产损失。</p>
                <p>4、如遇到未赴约或者骗子，请及时举报投诉，我们将为您追回损失，并给予违约者处罚，给予你补偿。</p>
                <p>5、送礼物者违约，礼物归收礼物者所有。收礼物者违约，我们将为送礼物者追回礼物,并给予违约者所收礼物等价值的处罚,并将50%的处罚补偿给送礼物者。</p>
              </div>
            </div>
          </div>
          <div class="redEnvelope-form" v-show="releseShow==2">
            <div class="form-wrap">
              <div class="form-item">
                <div class="item-th">红包类型:</div>
                <div class="item-td" @click="openActionSheet(red_typeList, 'red_type')">
                  <span class="date-type">{{red_form.type === '' ? '请选择红包类型' : red_typeList[red_form.type-1]}}</span>
                  <i class="iconfont icon-next"></i>
                </div>
              </div>
              <div class="form-item" v-if="red_form.type == 1">
                <div class="item-th">红包口令:</div>
                <div class="item-td">
                  <input class="date-input" v-model="red_form.password" type="text" placeholder="请填写红包口令">
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">红包金额:</div>
                <div class="item-td">
                  <input class="date-input" v-model="red_form.price" type="tel" placeholder="请填写红包金额">
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">红包数量:</div>
                <div class="item-td">
                  <input class="date-input" v-model="red_form.num" type="tel" placeholder="请填写红包数量">
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">门槛设定:</div>
                <div class="item-td" @click="openActionSheet(red_requirementList, 'red_requirement')">
                  <span class="date-requirement">{{red_form.requirement === '' ? '请选择门槛' : red_requirementList[red_form.requirement-1]}}</span>
                  <i class="iconfont icon-next"></i>
                </div>
              </div>
              <div class="form-item">
                <div class="item-th">红包描述:</div>
                <div class="item-td">
                  <textarea class="date-description" v-model="red_form.description" placeholder="说点什么……"></textarea>
                </div>
              </div>
              <div class="btn-wrap">
                <button class="date-btn" @click="submit_red">确认发布</button>
              </div>
            </div>
            <div class="rule-wrap">
              <div class="rule-title">红包约规则</div>
              <div class="rule-content">
                <p>1、请绿色约拍、约会、约游，严禁涉黄、涉暴力与政治。.</p>
                <p>2、达成求约后请及时私聊求约事宜，并商量确定收取或赠送赴约担保礼物金额,最后确定拍摄、约会或旅游行程安排。若为AA制，则赴约担保礼物退回。</p>
                <p>3、新版一对多交友约友众多，切勿相信任何私下转账要求,避免上当受骗，避免财产损失。</p>
                <p>4、如遇到未赴约或者骗子，请及时举报投诉，我们将为您追回损失，并给予违约者处罚，给予你补偿。</p>
                <p>5、送礼物者违约，礼物归收礼物者所有。收礼物者违约，我们将为送礼物者追回礼物,并给予违约者所收礼物等价值的处罚,并将50%的处罚补偿给送礼物者。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="voiceGif" class="voice-gif">
        <img src="../image/voice.gif" alt="">
      </div>
    </div>
  </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">
  var app;
  apiready = function () {
    $api.fixStatusBar($api.dom('#header'));
    api.setStatusBarStyle({
      style: 'light',
    });
    app = new Vue({
      el: '#app',
      data: {
        qiniuToken: '',
        voiceGif: false,
        audioIcon: '../image/stop.png',
        audioDuration: '',
        audioUrl: '',
        releseShow: 1,
        form: {
          uid: $api.getStorage('uid'),
          audio: '',
          audio_time: '',
          type: '',
          fee: '',
          time: '',
          place: '',
          pay: '',
          longitude: '',
          latitude: '',
          requirement: '',
          description: '',
        },
        red_form: {
          uid: $api.getStorage('uid'),
          type: '',
          price: '',
          num: '',
          requirement: '',
          description: '',
        },
        typeList: ['约K歌', '约吃饭', '叫起床'],
        payList: ['我付', '对方付', 'AA'],
        requirementList: ['密友', 'VIP', '账户余额大于500港币', '无门槛'],
        red_typeList: ['口令红包', '照片红包', '语音红包'],
        red_requirementList: ['异性', 'VIP异性', '全部'],
      },
      created: function () {
        this.getQiniuToken();
      },
      mounted: function () {},
      methods: {
        // 获取七牛token
        getQiniuToken: function () {
          var _this = this;
          api.ajax({
            url: baseUrl + 'qiniu/token',
            method: 'get',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: {
                uid: $api.getStorage('uid')
              }
            }
          }, function (ret, err) {
            if (ret.status == 200) {
              _this.qiniuToken = ret.data[0];
            }
          })
        },

        voiceTouchstart: function () {
					this.voiceGif = true;
					api.startRecord({
						path: 'fs://audio_' + (+new Date()) + '.amr'
					});
				},

				voiceTouchend: function () {
					var _this = this;
					_this.voiceGif = false;
					api.stopRecord(function (ret, err) {
						if (ret) {
							_this.audioDuration = ret.duration;
							_this.form.audio_time = ret.duration;
							_this.audioUrl = ret.path;
							_this.uploadFiles(ret.path);
						}
					});
				},

        uploadFiles: function (fileUrl) {
					var _this = this;
					api.ajax({
						url: qiniuBaseUrl,
						method: 'post',
						data: {
							values: {
								token: _this.qiniuToken
							},
							files: {
								file: fileUrl
							}
						}
					}, function (ret, err) {
						if (ret) {
							_this.form.audio = ret.key;
						}
						if (err) {
							api.toast({
								msg: '网络错误，请稍后再试',
								duration: 2000,
								location: 'bottom'
							});
						}
					});
        },
        
        // 播放语音
				playVoice: function () {
					var _this = this;
					_this.audioIcon = '../image/playing.gif';
					api.startPlay({
						path: _this.audioUrl
					}, function (ret, err) {
						_this.audioIcon = '../image/stop.png';
					});
        },
        
        // 删除语音
				deleteAudio: function () {
					this.audioUrl = '';
					this.audioDuration = '';
					this.form.audio = '';
					this.form.audio_timer = '';
				},

        openActionSheet: function (buttons, type) {
          var _this = this;
          api.actionSheet({
            title: '',
            cancelTitle: '取消',
            destructiveTitle: '',
            buttons: buttons
          }, function(ret, err) {
            if (ret) {
              if (type == 'type') {
                _this.form.type = ret.buttonIndex != 4 ? ret.buttonIndex : '';
              }
              if (type == 'pay') {
                _this.form.pay = ret.buttonIndex != 4 ? (ret.buttonIndex-1) : '';
              }
              if (type == 'requirement') {
                _this.form.requirement = ret.buttonIndex != 5 ? ret.buttonIndex : '';
              }
              if (type == 'red_type') {
                _this.red_form.type = ret.buttonIndex != 4 ? ret.buttonIndex : '';
              }
              if (type == 'red_requirement') {
                _this.red_form.requirement = ret.buttonIndex != 4 ? ret.buttonIndex : '';
              }
            }
          });
        },
        submit: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '正在发布……'
          });
          api.ajax({
            url: baseUrl + 'appointment/add',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: this.form
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret) {
              api.toast({
                msg: ret.message[0]
              })
              if (ret.status == 200) {
                api.sendEvent({
                  name: 'refreshDating',
                });
                setTimeout(function () {
                  api.closeWin();
                }, 1000)
              }
            }
          })
        },
        submit_red: function () {
          var _this = this;
          api.showProgress({
            title: '',
            text: '正在发布……'
          });
          api.ajax({
            url: baseUrl + 'red/add',
            method: 'post',
            headers: {
              token: $api.getStorage('deviceToken')
            },
            data: {
              values: this.red_form
            }
          }, function (ret, err) {
            api.hideProgress();
            if (ret) {
              api.toast({
                msg: ret.message[0]
              })
              if (ret.status == 200) {
                api.sendEvent({
                  name: 'refreshDating',
                });
                setTimeout(function () {
                  api.closeWin();
                }, 1000)
              }
            }
          })
        },
        relese: function (index) {
          this.releseShow = index
        }
      },
      filters: {}
    })
  }
</script>